<template>
    <el-container style="max-height: 40%">
        <el-header height="40px" style="position: relative;background-color:#409eff;color:white">
            <h4 style="position: absolute;width:98%;text-align:center;">
                {{current_dorm==null?'':current_dorm.code+'宿舍调整'}}</h4>
            <router-link :to="'/dorm_list/'+$route.params.building_id" class="fa fa-close"
                         style="position: absolute;color:red;right:5px;top:5px"></router-link>
        </el-header>
        <div class="row" style="margin: 0px">
            <div class="col-md-1">
                <div>
                    <button class="btn btn-primary" style="margin-top: 20px;width: 80px;" @click="updateDorm" :disabled="!dormUpdated">保存</button>
                </div>
            </div>
            <div class="col-md-11">
                <el-transfer
                        :props="{key:'id',label:'name'}"
                        v-model="undorm_ids"
                        :data="allStaff"
                        :titles="['住宿人员','未安排住宿人员']"
                        @change="handleChange"
                >
                </el-transfer>
            </div>

        </div>
    </el-container>
</template>
<script>
    export default{
        props: ['dorm_id'],
        created(){
            this.initData(this.dorm_id);
        },
        watch: {
            'dorm_id': function (to, from) {
                this.initData(to);
            }
        },
        data(){
            return {
                allStaff: [],
                current_dorm: null,
                undorm_ids: [],
                dormStaff: null,
                staffNotDorm: null,
                dormUpdated:false
            };
        },
        methods: {
            initData(dorm_id){
                axios.get('api/v1/dorm/' + dorm_id).then(result => {
                    this.current_dorm = result.data;
                    this.dormStaff = this.current_dorm.staff;
                    axios.get('api/v1/staff?dorm_id=').then(result => {
                        this.staffNotDorm = result.data;
                        this.undorm_ids = Array.from(this.staffNotDorm, s => s.id);
                        this.allStaff = _.concat(this.dormStaff, this.staffNotDorm);
                    });
                });
            },
            handleChange(){
                this.allStaff.forEach(function (s) {
                    if(_.indexOf(this.undorm_ids,s.id)==-1){
                        s.dorm_id=this.current_dorm.id;
                    }else{
                        s.dorm_id=null;
                    }
                },this);
                if(this.allStaff.filter(s=>s.dorm_id!=null).length<=this.current_dorm.beds){
                    this.dormUpdated=true;
                }else{
                    this.dormUpdated=false;
                }
            },
            updateDorm(){
                if(this.dormUpdated){
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    this.allStaff.forEach(function (s) {
                        axios.put('api/v1/staff/'+s.id,s).then(result=>{
                            if(result.error){
                                this.$notify.error({
                                    title:'更新失败',
                                    message:result.message
                                });
                            }
                        }).catch(error=>{
                            console.log(error);
                        });
                    },this);
                    loading.close();
                    this.$emit('dormUpdated');
                    this.$notify({title:'更新完成',type:'success'});
                }else {
                    this.$notify({title:'没有信息更新',type:'info'});
                }
                this.dormUpdated=false;
            }
        }
    }
</script>
